<script>
import store from "@/public/store";
import {baseUrl} from "@/api/request";
import {isArray} from "uview-ui/libs/luch-request/utils";
import {isFalse} from "@/uview-ui/components/u-avatar-cropper/weCropper";

const app = getApp();
export default {
  name: "upload_note",
  data() {
    return {
      imgurlBwc: app.globalData.imgurlBwc,
      action: baseUrl + '/api/order/upload',
      // 平台数据
      platformData: [
          {
            platformType: 1,
            title: '小红书',
            image: '/note/xhs@2x.png',
            fileList: [],
          },
          {
            platformType: 2,
            title: '抖音',
            image: '/note/douyin@2x.png',
            fileList: [],
          },
          {
            platformType: 3,
            title: '大众点评',
            image: '/note/dzdp@2x.png',
            fileList: [],
          },
          {
            platformType: 4,
            title: '美团',
            image: '/note/mt@2x.png',
            fileList: [],
          },
      ],
      HeaDers: {
        'authorization': uni.getStorageSync('token')
      },
      orderID: "", // 订单ID
      detailsData: {},//订单详情数据
      btnHeight: '',//底部按钮高度
      notePlatforms: [], //笔记多平台数据
      notePlat: {},//笔记单平台数据
      source:  '',//订单列表的来源，1、order：是tabbar导航订单列表；2、pageOrder：是我的里面订单列表
      updataImg: [],//上传笔记图片
      updataItem: {
        fileList:[]
      },
    }
  },
  onLoad(opt) {
    //新增按钮跳转过来的数据
    this.detailsData = JSON.parse(decodeURIComponent(opt.data));
    this.source = opt.source
    console.log('opt==', this.detailsData)

    this.orderID = this.detailsData.id

    //判断套餐是否多平台上传笔记
    /* if (this.detailsData.is_multi_platform == 1){
      let newArray = this.detailsData.note_platforms
      //处理多平台数据
      newArray.forEach((item, index) => {
        this.notePlatforms.push({
          platformType: item.platformType,
          title: item.title,
          image: item.image,
          fileList: [],
        })
      })
    } else {
      let noteType = this.detailsData.platform_type
      this.notePlat = {
        platformType: noteType.platformType,
        title: noteType.title,
        image: noteType.image,
        fileList: [],
      }
    } */
    console.log('单平台数据=', this.notePlat)
    //  获取底部按钮高度
    uni.createSelectorQuery().select('.bottom-btn-wrap').boundingClientRect(rect => {
      this.btnHeight = rect.height
      console.log('高度===', rect.height)
    }).exec();
  },
  methods: {
    // 上传图片
    Upsuccess(data, index, lists, name) {
      console.log('上传的图', data, name)
      // console.log('上传name=',  this.detailsData.is_multi_platform)
      // 提示用户上传图片不能超过10M
      if (data.result.size > 1048576){
        uni.showModal({
          title: '提示',
          content: '您上传的图片过大，请重新上传',
          confirmColor: '#FF4910',
          success: function (res) {
            if (res.confirm) {

            } else if (res.cancel) {

              //console.log('用户点击取消');
            }
          }
        });
      } else  {
        uni.showToast({
          title: '图片上传成功',
          icon: 'success',
          duration: 3000
        });
        if(this.detailsData.is_multi_platform === 1){
          this.fileLiatData3[name].push(data.result.show_path);
          var filelist = this.fileLiatData3[name].join(",");
          this.fileLiatData3[name] = filelist;
          console.log('上传图数组==', this.fileLiatData3)
        }else {
          this.updataItem.fileList.push(data.result.show_path);
          var filelist = this.updataItem.fileList.join(",");
          this.updataItem.fileList = filelist
          console.log('上传图==', this.updataItem.fileList)
        }
      }
      //重新定义面板高度
      this.ChongxinDingyi()
    },
    // 删除图片
    Remove(e) {
      console.log('移除图片',this.updataImg)
      /* this.updataImg.splice(e, 1)

      var filelist = this.updataImg.join(",");
      this.updataImg = filelist; */
    },
    Tijiao() {
      let that = this
      const newArray = []
      const newItem = {}
      let uploadData = {}
      if(that.detailsData.is_multi_platform === 1){  //多平台提交数据
        that.detailsData.note_platforms.forEach((item, index) => {
          newArray.push({
            platform_type: item.platformType,
            title: item.title,
            url: item.Urllink,
            images: that.updataImg,
          })
        })
        uploadData = {
          order_id: that.orderID,
          notes_content: newArray
        }
      }else {  //单平台提交数据
        that.newItem = {
          platform_type: that.detailsData.platform_type.platformType,
          title: that.detailsData.platform_type.title,
          url: that.detailsData.platform_type.Urllink,
          images: that.updataItem.fileList,
        }
        uploadData = {
          order_id: that.orderID,
          notes_content: [that.newItem]
        }
      }
      console.log('提交数据', uploadData)
      console.log('订单数据', this.detailsData)
      /* uploadData.notes_content.forEach((item, index) => {
        if (item.images=='' || item.url=='' || uploadData.order_id==''){
          uni.showToast({
            title: '上传内容不能为空',
            icon: 'none',
            duration: 3000
          });
          return false;
        }
      })
      that.$api.GetNotesReview(uploadData).then(res => {
        // console.log('提交探店', res.data.result);
        uni.showToast({
          title: '提交成功',
          icon: 'none',
          duration: 3000
        });
        setTimeout(() => {
          if (that.source == 'order'){
            uni.switchTab({
              url: '/pages/orders/orders_gf?page=1'
            })
          } else if (that.source == 'pageOrder') {
            uni.navigateTo({
              url: '/subpackageA/pages/orders/orders_gf?page=1'
            })
          }
        }, 2000);

      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 3000
        });
        console.log('提交失败，订单数据=', that.detailsData)
      }) */
      /*if (that.Urllink == '') {
        uni.showToast({
          title: '请输入链接',
          icon: 'none',
          duration: 3000
        })
      } else if (that.FileList3 == '') {
        uni.showToast({
          title: '请上传截图',
          icon: 'none',
          duration: 3000
        })
      } else {

      }*/
    },
    // 上传笔记报错事件
    Uperror(res) {
      uni.showToast({
        title: res + "数据出错",
        icon: 'none',
        duration: 3000
      });
    },
    // 跳转到截图步骤页面
    lookshili(type) {
      console.log("type", type)
      //this.steuptfour_Popup = true
      if (type == 1) {
        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/xhs.png"
        })
      } else if (type == 2) {
        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/dy.png"
        })
      } else if (type == 3) {
        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/dzdp.png"
        })
      } else if (type == 4) {
        uni.navigateTo({
          url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.imgurlBwc + "/teache/mt.png"
        })
      }
    },
    ChongxinDingyi() {
      //重新定义面板高度
      // // #ifdef APP-PLUS
      // setTimeout(() => {
      //   this.$refs.collapseOne.init();
      // }, 500)
      // // #endif
      // // #ifdef MP-WEIXIN || H5
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.$refs.collapseOne.init();
      //   }, 200)
      // });
      // // #endif
    },
    // 跳转到截图
    screenShot(){
      uni.navigateToMiniProgram({
        appId: 'wx734c1ad7b3562129',
        path: 'pages/my/my.html',
        extraData: {

        },
        success(res) {
          // 打开成功
          console.log('跳转成功');
        },
        fail(res) {
          // 打开失败
          console.log('跳转失败');
        }
      })
    },
  }
}
</script>

<template>
  <view>
    <view v-if="detailsData.is_multi_platform == 1" v-for="(item, index) in detailsData.note_platforms" :key="index" style="background-color: white;margin: 20rpx;border-radius: 20rpx;padding: 20rpx;">
      <view class="box_on_wrap" style="padding: 10rpx">
        <view class="box_on_head" style="align-items: center;display: flex;padding-bottom:20rpx">
          <image style="width: 48rpx;height: 48rpx;border-radius: 50%;margin-right: 20rpx;" :src="item.image"></image>
          <text class="box_on_title_text" style="font-size: 32rpx">{{item.title}}</text>
        </view>
        <view class="one">1</view>
        <view style="margin-left: 20rpx;color: #333333;font-size: 28rpx;font-weight: bold;flex: 1;float: left;">上传{{item.title}}笔记截图</view>
        <view class="box_on_why" @click="lookshili(item.platformType)">
          <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
          <!--截图教程提示-->
          <view class="jiaocheng_box">
            <text class="triangle"></text>
            <text class="jiaocheng_box_text">如何获取笔记截图？</text>
          </view>
        </view>
        <view @click="screenShot()" style="width: 130rpx;height: 48rpx;line-height:48rpx;padding: 0 20rpx;color: #FFFFFF;background: #FF7800;border-radius: 30rpx;float: right">去截图</view>
<!--        <view @click="lookshili(type)" style="color: #FF4E0D;font-size: 24rpx;">如何截图？</view>-->
      </view>
      <view class="one_desc"
            style="background-color: #FFF8E8;width: 630rpx;border-radius: 20rpx;padding: 20rpx;color: #FF7A00">
        <view>请按照笔记要求正确上传</view>
        <!--      <view v-if="type === 2">拒绝原因：{{ reason }}</view>-->
      </view>
      <view style="height: 20rpx"></view>
      <view class="upload_box">
        <u-upload :action="action" name="file" :file-list="updataImg"
                  upload-text="上传图片" max-count="9" :header="HeaDers" :multiple="true"
                  @on-success="Upsuccess" @on-remove="Remove" :index="index"></u-upload>
        <u-toast ref="uToast"></u-toast>
      </view>
      <view class="box_on_title" style="margin-top: 30rpx">
        <view style="display: flex;align-items: center">
          <text class="one">2</text>
          <text style="margin-left: 10rpx">笔记链接</text>
        </view>
      </view>
      <view class="box_on_text" style="display: flex;align-items: center">
        <text style="font-size: 28rpx;padding-right: 20rpx">笔记链接</text>
        <u-input v-model="item.Urllink" type="text" :border="false" placeholder="请输入或粘贴笔记链接"  style="width:calc(100% - 140rpx)"/>
        <u-input v-model="item.platformType" type="text" style="display: none"></u-input>
      </view>
      <u-line color="#EBEBEB"></u-line>
      <view class="box_on_tips" style="margin-top: 24rpx;color: #FF7A00;font-size: 24rpx">温馨提示：请到您发布笔记的平台，复制笔记链接，输入或粘贴到上面输入框内</view>
    </view>
    <view v-if="detailsData.is_multi_platform == 0" style="background-color: white;margin: 20rpx;border-radius: 20rpx;padding: 20rpx;">
      <view class="box_on_wrap" style="padding: 10rpx">
        <view class="box_on_head" style="align-items: center;display: flex;padding-bottom:20rpx">
          <image style="width: 48rpx;height: 48rpx;border-radius: 50%;margin-right: 20rpx;" :src="detailsData.platform_type.image"></image>
          <text class="box_on_title_text" style="font-size: 32rpx">{{detailsData.platform_type.title}}</text>
        </view>
        <view class="one">1</view>
        <view style="margin-left: 20rpx;color: #333333;font-size: 28rpx;font-weight: bold;flex: 1;float: left;">上传{{detailsData.platform_type.title}}笔记截图</view>
        <view class="box_on_why" @click="lookshili(detailsData.platform_type.platformType)">
          <u-icon name="question-circle" color="#2979ff" size="35" style=""></u-icon>
          <!--截图教程提示-->
          <view class="jiaocheng_box">
            <text class="triangle"></text>
            <text class="jiaocheng_box_text">如何获取笔记截图？</text>
          </view>
        </view>
        <view @click="screenShot()" style="width: 130rpx;height: 48rpx;padding: 4rpx 20rpx;color: #FFFFFF;background: #FF7800;border-radius: 30rpx;float: right">去截图</view>
        <!--        <view @click="lookshili(type)" style="color: #FF4E0D;font-size: 24rpx;">如何截图？</view>-->
      </view>
      <view class="one_desc"
            style="background-color: #FFF8E8;width: 630rpx;border-radius: 20rpx;padding: 20rpx;color: #FF7A00">
        <view>请按照笔记要求正确上传</view>
        <!--      <view v-if="type === 2">拒绝原因：{{ reason }}</view>-->
      </view>
      <view style="height: 20rpx"></view>
      <view class="upload_box">
        <u-upload :action="action" name="file" :file-list="updataItem.fileList"
                  upload-text="上传图片" max-count="9" :header="HeaDers" :multiple="true"
                  @on-success="Upsuccess" @on-remove="Remove" :index="index"></u-upload>
      </view>
      <view class="box_on_title" style="margin-top: 30rpx">
        <view style="display: flex;align-items: center">
          <text class="one">2</text>
          <text style="margin-left: 10rpx">笔记链接</text>
        </view>
      </view>
      <view class="box_on_text" style="display: flex;align-items: center">
        <text style="font-size: 28rpx;padding-right: 20rpx">笔记链接</text>
        <u-input v-model="detailsData.platform_type.Urllink" type="text" :border="false" placeholder="请输入或粘贴笔记链接"  style="width:calc(100% - 140rpx)"/>
        <u-input v-model="detailsData.platform_type.platformType" type="text" style="display: none"></u-input>
      </view>
      <u-line color="#EBEBEB"></u-line>
      <view class="box_on_tips" style="margin-top: 24rpx;color: #FF7A00;font-size: 24rpx">温馨提示：请到您发布笔记的平台，复制笔记链接，输入或粘贴到上面输入框内</view>
    </view>


    <!--<view style="background-color: white;margin: 20rpx;border-radius: 20rpx;padding: 20rpx;">
      <view class="u-flex" style="padding: 10rpx">
        <view class="one">2</view>
        <view style="margin-left: 20rpx;color: #333333;font-size: 28rpx;font-weight: bold">笔记链接</view>
      </view>
      <view class="input_box u-flex">
        <view style="margin-right: 20rpx">笔记链接</view>
        <u-input v-model="Urllink" type="text" :border="false"
                 placeholder="请将链接复制到此处"/>
      </view>
      <view style="height: 10rpx"></view>
      <u-line></u-line>
      <view style="height: 20rpx"></view>
      <view style="font-size: 24rpx;color: #FF7A00">
        温馨提示：请到您发布笔记的平台，复制笔记链接，输入或粘贴到上面输入框内
      </view>
      <view style="height: 10rpx"></view>
    </view>-->
    <view :style="{height: btnHeight + 'px'}"></view>
    <view class="bottom-btn-wrap" @click="Tijiao">
      <view class="note-btn-bottom">上传笔记</view>
    </view>
    <!--上传错误提示-->
    <u-popup v-model="isUpdataError" mode="bottom" width="400" border-radius="20">
      <view class="u-flex u-row-center">
        <text class="u-text-error">上传失败</text>
        <text class="u-ml-sm">请检查网络是否正常</text>
      </view>
    </u-popup>
  </view>
</template>
<style>
page {
  background-color: #F5F5F5;
}
</style>
<style scoped lang="scss">
.box_on_wrap {
  padding: 30rpx;
  border-radius: 24rpx;
  background-color: #FFFFFF;
  margin-bottom: 60rpx;
  .box_on_title {
    height: 60rpx;
    //display: flex;
    align-items: center;
    //justify-content: space-between;

    view:nth-child(1) {
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      font-weight: bold;
    }

    view:nth-child(2) {
      color: #FF4E0D;
      font-size: 24rpx;
    }
  }
  .box_on_why {
    width: 40rpx;height: 40rpx;
    margin-left: 10rpx;
    float: left;
    position: relative;
    //截图教程提示css
    .jiaocheng_box {
      text-align: center;
      width: 40rpx;
      height: 80rpx;
      .triangle {
        width: 0;
        height: 0;
        position: absolute;top: 20rpx;left: 0;right: 0;
        margin: 0 auto;
        border-left: 12px solid transparent; /* 左边的边框是透明的 */
        border-right: 12px solid transparent; /* 右边的边框是透明的 */
        border-top: 0px solid transparent; /* 底边是透明的 */
        border-bottom: 10px solid rgba(105,105,105,0.5);; /* 上边是黑色的，形成三角形 */
      }
      .jiaocheng_box_text {
        position: absolute;top: 41rpx;left: calc(100% - 120rpx);
        width: 240rpx;
        height: 50rpx;
        padding: 10rpx;
        background: rgba(105,105,105,0.5);
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
}
.one_desc {
  font-weight: 400;
  font-size: 26rpx;
  color: #666666;
  line-height: 40rpx;
  margin-top: 10rpx;
}

.one {
  width: 22rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #FF7A01;
  display: block;
  float: left;
}

.one::after {
  content: "";
  display: block;
  background: linear-gradient(90deg, #FFEE9B 60%, rgba(216, 216, 216, 0) 100%);
  width: 38rpx;
  height: 13rpx;
  border-radius: 30rpx;
  margin-top: -15rpx;
  margin-left: -10rpx;
}

.upload_box {

}
.note-btn-bottom{
  width: 90%;
  height: 88rpx;
  background-color:#FF7A00;
  color: white;
  text-align: center;
  line-height: 88rpx;
  border-radius: 60rpx;
  margin: 0 auto;
}
</style>



